<template>
  <div>
      <el-form v-model="users" style="text-align: left;width: 600px" ref="dataForm">
        <el-form-item label="用户名" label-width="120px" prop="username">
             <label>  {{users.username}}</label>
        </el-form-item>
        <el-form-item label="真实姓名" label-width="120px" prop="name">
          <el-input v-model="users.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="120px" prop="phone">
          <el-input v-model="users.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="120px" prop="email">
          <el-input v-model="users.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px" show-password prop="password">
          <el-button type="warning" @click="resetPassword(users.username)">重置密码</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" style="" class="dialog-footer">
        <el-button type="primary" @click="onSubmit()">确 定 修 改</el-button>
      </div>
  </div>
</template>

<script>
export default {
    name: 'Personal',
    data () {
        return {
          users: []
        }
    },
    mounted () {
      this.listUsers()
    },
    methods: {
      listUsers () {
        var _this = this
        this.$axios.get('/admin/usersByUsername').then(resp => {
          if (resp && resp.data.code === 200) {
            _this.users = resp.data.result[0]
          } else {
              // 从后端返回信息
              this.$alert(resp.data.message, '提示', {
                type: 'error',
                dangerouslyUseHTMLString: true
              })
          }
        })
      },
      onSubmit (user) {
        this.$alert('修改成功')
      },
      resetPassword (username) {
        this.$axios.put('/admin/user/password', {
          username: username
        }).then(resp => {
          if (resp && resp.data.code === 200) {
            this.$alert('密码已重置为 0774123')
          }
        })
      }

    }
}
</script>

<style>

</style>
